<template>
  <div class="hotelList">
    <a-layout style="background: #f7f6f4">
        <a-layout-content style="min-width: 800px">
          <a-spin :spinning="hotelListLoading">
            <div class="card-wrapper">
                <HotelCard  class="carditem" :hotel="item" v-for="item in hotelList.slice(this.beginnum, this.usedendnum)" :key="item.index" @click.native="jumpToDetails(item.id)"></HotelCard>
            </div>
          </a-spin>

      </a-layout-content>
    </a-layout>
    </div>
</template>
<script>
import HotelCard from './components/hotelCard'
import { mapGetters, mapActions, mapMutations } from 'vuex'

export default {
  name: 'home',
  components: {
    HotelCard
  },
  data(){
    return{
      emptyBox: [{ name: 'box1' }, { name: 'box2'}, {name: 'box3'}],
        beginnum:0,
    }
  },
  mounted() {
    this.getHotelList(),
    this.getUserInfo()
  },
  computed: {
    ...mapGetters([
      'hotelList',
      'hotelListLoading',

    ]),
    usedendnum(){
      let displayendnum=this.hotelList.length;
      let usedend=0;
      if(displayendnum<6){
        usedend=displayendnum;
      }else {
        usedend=6;
      }
        return usedend
    }
  },
  methods: {
    ...mapMutations([
      'set_hotelListParams',
      'set_hotelListLoading'
    ]),
    ...mapActions([
      'getHotelList',
      'getUserInfo'
    ]),
    // sortBykeyUp(ary, key) {
    //   ary.sort(function (a, b) {
    //     let x = a[key]
    //     let y = b[key]
    //     return ((x > y) ? -1 : (x > y) ? 1 : 0)
    //   })
    //   console.log("rate升序")
    //   console.log(ary)
    // },
    pageChange(page, pageSize) {
      const data = {
        pageNo: page - 1
      }
      this.set_hotelListParams(data)
      this.set_hotelListLoading(true)
      this.getHotelList()
    },
    jumpToDetails(id){
      this.$router.push({ name: 'hotelDetail', params: { hotelId: id }})
    }
  },
}
</script>
<style scoped lang="less">
  .hotelList {
    text-align: center;
    margin-left: 150px;
    margin-right: 150px;
    padding-bottom: 80px;
    /*    padding: 50px 100px;
*/
    .emptyBox {
      height: 0;
      margin-right: 100px;
    }
    .card-wrapper{
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      flex-grow: 1;
      min-height: 800px
    }
    .card-wrapper .carditem {
      margin: 25px;
      position: relative;

    }
  }
</style>
